<script setup lang="tsx">
import { unref, ref } from 'vue'
import { Dialog } from '@/components/Dialog'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { propTypes } from '@/utils/propTypes'
import SCADAApi from '@/api/scada'
import { AlertList } from '@/api/scada/type'
import { ElMessage, ElBadge } from 'element-plus'
defineProps({
  color: propTypes.string.def('')
})
const DeteleData = ref<AlertList[]>([])
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await SCADAApi.GetAlertList({
      pageNum: String(unref(currentPage)),
      pageSize: String(unref(pageSize))
    })
    return {
      list: res.rows,
      total: res.total
    }
  },
  fetchDelApi: async () => {
    const res = await SCADAApi.DeleteAlertList(unref(DeteleData)[0])
    return !!res
  }
  // immediate:false
})
const { dataList, total, currentPage, pageSize } = tableState
const { getList, getElTableExpose, delList } = tableMethods

const dialogVisible = ref(false)
const saveLoading = ref(false)
const OpenAlert = () => {
  console.log('开始巡检')
  dialogVisible.value = true
  // getList()
}
const tableColumns: TableColumn[] = [
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'siteName',
    label: '站点'
  },
  {
    field: 'devName',
    label: '设备'
  },
  {
    field: 'logTime',
    label: '告警时间',
    width: 150
  },
  {
    field: 'value',
    label: '告警值'
  },
  {
    field: 'limitValue',
    label: '限值'
  },
  {
    field: 'alertTypeStr',
    label: '告警信息',
    width: 250
  },
  {
    field: 'action',
    label: '操作',
    slots: {
      default: (data: any) => {
        return (
          <>
            <span class="TableBtn" onClick={() => action(data.row)}>
              处理
            </span>
            <span class="TableBtn" style="color:#f56c6c" onClick={() => delData(data.row)}>
              删除
            </span>
          </>
        )
      }
    }
  }
]
const action = async (data: AlertList) => {
  const i = await SCADAApi.AddAlertHandle(data)
  if (i) {
    ElMessage.success('告警处理成功')
    getList()
  } else {
    ElMessage.error('告警处理失败')
  }
}
//删除告警
const delLoading = ref(false)
const delData = async (row: any | null) => {
  const elTableExpose = await getElTableExpose()
  DeteleData.value = row ? [row] : elTableExpose?.getSelectionRows().map((v: any) => v) || []
  delLoading.value = true
  console.log(DeteleData.value, unref(DeteleData).length)
  await delList(unref(DeteleData).length).finally(() => {
    delLoading.value = false
  })
}
</script>

<template>
  <!-- <ElDropdown :class="prefixCls" trigger="click" @command="setLang"> -->
  <div class="p-[0px 10px]" @click="OpenAlert">
    <ElBadge :value="total" class="item">
      <Icon
        :size="18"
        icon="vi-ant-design:alert-outlined"
        class="cursor-pointer !p-0"
        :class="$attrs.class"
        :color="color"
      />
    </ElBadge>
    <Dialog v-model="dialogVisible" title="告警列表" style="width: 1200px">
      <Table
        v-model:pageSize="pageSize"
        v-model:currentPage="currentPage"
        :columns="tableColumns"
        :data="dataList"
        row-key="uuid"
        :pagination="{
          total: total
        }"
        @register="tableRegister"
      />
      <template #footer>
        <BaseButton type="primary" :loading="saveLoading" @click="dialogVisible = false">
          确定
        </BaseButton>
        <BaseButton @click="dialogVisible = false">关闭</BaseButton>
      </template>
    </Dialog>
  </div>

  <!-- <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
          {{ item.name }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>  -->
  <!-- </ElDropdown> -->
</template>
<style scoped lang="less">
:deep(.TableBtn) {
  margin: 0 5px;
  cursor: pointer;
  color: #409eff;
  font-weight: 600;
}
</style>
